<template>

  <div>
    <p>Has published books:</p>
    <span>{{ publishedBooksMessage}}</span>

      <div>
        store count:{{ counterStore.count }}
      </div>

      <button @click="handleClick"> add storeCount</button>

    <div>
      <p>x value</p>
      <input v-model="x" />
    </div>

    <div>
      <p>count value</p>
      <input v-model="obj.count" />
    </div>
    <div>
      childs
      <Childs :title="obj.count" :number="(Number)(obj.count)"  class="testClass" />
    </div>

    <div>

      vmodel
      <Vmodel v-model="obj.count"></Vmodel>

    </div>

    <div>
      child with no props
      <Child></Child>
    </div>

    
  </div>
  
  </template>
  
  <script setup lang="ts">

import { computed, onUpdated, reactive, ref ,watch} from "vue";

import { useCounterStore } from "@/stores/counter";

import Childs from './propsChilds.vue'

import Vmodel  from './vmodel.vue'

import Child  from './Child.vue'

const counterStore =  useCounterStore()
console.log(counterStore)



const handleClick = ()=>{
  console.log('handle')
  counterStore.increment()
}

  const x = ref(0)
  const y = ref(0)

  watch(x,(newModel,)=>{
    console.log(newModel)
  })

  watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  })

  watch([x, () => y.value], ([newX, newY]) => {
    console.log(`x is ${newX} and y is ${newY}`)
  })


  const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(()=>obj.count, (count) => {
  console.log(`Count is: ${count}`)
})
  

  const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})

function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

onUpdated(()=>{
  console.log('parents update 2222')
})
 
  
  </script>
  